<template>
    <div>
        <Row :gutter="24">
            <Col :xs="4" :lg="12">
                <Button type="success" icon="md-add" @click="addBtn()">添加</Button>
            </Col>
            <Col :xs="8" :lg="4" class="hidden-mobile">
                <Input placeholder="输入标题搜索" clearable v-model="searchForm.name"></Input>
            </Col>
            <Col :xs="8" :lg="4">
                <DatePicker :value="searchForm.start_at" @on-change="handleStartChange" format="yyyy-MM-dd"
                            type="daterange" placement="bottom-end" placeholder="选择开始时间"
                            style="width: 100%;"></DatePicker>
            </Col>
            <Col :xs="3" :lg="2">
                <Button type="primary" icon="ios-search" @click="getTableDataExcute(feeds.current_page)">搜索</Button>
            </Col>
            <Col :xs="3" :lg="2">
                <Button icon="md-refresh" @click="reset">重置</Button>
            </Col>
        </Row>
        <br>

        <Row>
            <div class="demo-spin-container" v-if="tableLoading">
                <Spin fix>
                    <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                    <div>加载中...</div>
                </Spin>
            </div>
            <Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange'></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="feeds.total" :current="feeds.current_page" :page-size="feeds.per_page" class="paging"
                          show-elevator show-total show-sizer @on-change="handleOnPageChange"
                          @on-page-size-change='onPageSizeChange'></Page>
                </div>
            </div>
        </Row>

        <add-component v-if='addModal.show' @on-add-modal-success='getTableDataExcute()'
                       @on-add-modal-hide="addModalHide"></add-component>
        <edit-component v-if='editModal.show' :modal-id='editModal.id' @on-edit-modal-success='getTableDataExcute()'
                        @on-edit-modal-hide="editModalHide"></edit-component>

        <Modal v-model="modalCoverImage.show">
            <p slot="header">图片预览</p>
            <div class="text-center">
                <img :src="modalCoverImage.url" alt="" v-if="modalCoverImage.show" class="center-align"
                     style="width:100%">
            </div>
            <div slot="footer">
            </div>
        </Modal>

    </div>
</template>


<script>
  import AddComponent from './components/add'
  import EditComponent from './components/edit'

  import {destroy, editWeight, getTableData} from '@/api/advertisement'

  export default {
    components: {
      AddComponent,
      EditComponent
    },
    data() {
      return {
        feeds: {
          data: [],
          total: 0,
          current_page: 1,
          per_page: 10
        },
        searchForm: {
          order_by: 'weight,asc',
          start_at: []
        },
        tableLoading: false,
        tableStatus: {
          type: []
        },
        addModal: {
          show: false
        },
        editModal: {
          show: false,
          id: 0
        },
        modalCoverImage: {
          show: false,
          url: null
        },
        columns: [
          {
            title: '排序', key: '', align: 'center', width: 90,
            render: (h, params) => {
              let t = this;

              return h('div', [
                h('Input', {
                  props: {
                    value: params.row.weight,
                    size: 'small',
                  },
                  on: {
                    input: (val) => {
                      this.changeWeight(val, params.row.id)
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '图片',
            key: '',
            minWidth: 100,
            render: (h, params) => {
              let t = this
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.cover_image.url,
                    'data-fancybox': '12312'
                  },
                  class: 'cover_image',
                  style: {
                    width: '60px',
                    height: '40px'
                  },
                  on: {
                    click: (value) => {
                      t.modalCoverImage.show = true
                      t.modalCoverImage.url = params.row.cover_image.url
                    }
                  }
                }),
              ])
            }
          },
          {title: '标题', key: 'name', minWidth: 100,},
          {title: '跳转链接', key: 'link_url', minWidth: 180},
          {title: '开始时间', key: 'start_at', minWidth: 100},
          {title: '结束时间', key: 'end_at', minWidth: 100},
          {title: '更新时间', key: 'updated_at', minWidth: 100},
          {title: '备注', key: 'descriptions', minWidth: 150},
          {
            title: '状态',
            key: '',
            minWidth: 100,
            render: (h, params) => {
              const e = params.row.enable
              const text = e === 'T' ? '正常' : (e === 'F' ? '待上架' : '已过期')
              const color = e === 'T' ? 'success' : (e === 'F' ? 'primary' : 'default')

              return h('Tag', {
                props: {
                  color: color
                }
              }, text)
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 130,
            render: (h, params) => {
              let t = this;
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editModal.show = true
                      this.editModal.id = params.row.id
                    }
                  }

                }, '修改'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除「' + params.row.name + '」？',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      t.destroyExcute(params.row.id, params.index);
                    }
                  }
                }, [
                  h('Button', {
                    style: {
                      margin: '0 5px'
                    },
                    props: {
                      type: 'error',
                      size: 'small',
                      placement: 'top'
                    }
                  }, '删除'),
                ])

              ])
            }
          },
        ]
      }
    },
    created() {
      let t = this
      t.getTableDataExcute()
    },
    methods: {
      handleOnPageChange: function (to_page) {
        this.getTableDataExcute(to_page)
      },
      onPageSizeChange: function (per_page) {
        this.feeds.per_page = per_page
        this.getTableDataExcute(this.feeds.current_page)
      },
      getTableDataExcute(to_page) {
        let t = this
        t.tableLoading = true
        t.feeds.current_page = to_page
        getTableData(to_page, t.feeds.per_page, t.searchForm).then(res => {
          t.feeds.data = res.data
          t.feeds.total = res.meta.total
          t.tableLoading = false
        }, function (error) {
          t.tableLoading = false
        })
      },
      onSortChange: function (data) {
        const order = data.column.key + ',' + data.order
        this.searchForm.order_by = order
        this.getTableDataExcute(1)
      },
      destroyExcute(id, key) {
        let t = this
        destroy(id).then(res => {
          t.feeds.data.splice(key, 1)
          t.$Notice.success({
            title: res.message
          })
        })
      },
      addBtn() {
        this.addModal.show = true
      },
      addModalHide() {
        this.addModal.show = false
      },
      editModalHide() {
        this.editModal.show = false
      },
      handleStartChange(val) {
        this.searchForm.start_at = val
      },
      changeWeight(val, id) {
        let t = this
        editWeight({weight: val}, id).then(res => {
          t.getTableDataExcute(t.feeds.current_page);
        })
      },

      // 重置
      reset() {
        let t = this
        t.searchForm=  {
          order_by: 'weight,asc',
          start_at: []
        },
          t.getTableDataExcute()
      }
    }
  }
</script>
